<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 130px; width: 100%"></div>
		<!-- <el-input v-model="emojisOutput" type="textarea" />
		<div class="f f-j-c">
			<Picker :data="emojiIndex" set="twitter" @select="showEmoji" />
		</div> -->
		<div class="chat m1280 f f-a-c">
			<div class="leftList">
				<div>
					<div class="topAll">All message</div>
					<div class="searchBox f f-a-c">
						<img src="/src/assets/sceh.png" alt="" />
						<input type="text" v-model="search" placeholder="Search" class="inp" name="" id="" />
					</div>
				</div>
				<div class="list">
					<div v-for="(item, index) in 10" :key="index" @click="qieList(item, index)" :class="{ active: inds == index, actiTop: index == inds - 1 }" class="listItem hand f f-a-c">
						<div class="lefImg"><img src="/src/assets/tou.png" alt="" /></div>
						<div class="right">
							<div class="nameBox f f-a-c f-j-b">
								<div class="name">Flex Gates</div>
								<div class="time">12:00</div>
							</div>
							<div class="count">Do you have some time for a quick chat?</div>
						</div>
					</div>
				</div>
			</div>
			<div class="centerView">
				<div class="topImg f f-a-c f-j-b">
					<div class="lefBox f f-a-c">
						<div class="imgBox">
							<img src="/src/assets/tou.png" alt="" />
							<div class="dian"></div>
						</div>
						<div class="nameBox">
							<div class="name">Joshua Brown</div>
							<div class="count">CFO @ TechNova Solutions</div>
						</div>
					</div>
					<div class="hand rigBtn">$60 / 30mins</div>
				</div>
				<!-- 这里是聊天内容 -->
				<div class="chats hand">
					<div v-for="(item, index) in list" :key="index" class="cahtItem">
						<div v-if="item.pos == 'left'" class="left f">
							<div class="lefImg"><img src="/src/assets/tou.png" alt="" /></div>
							<div class="count">
								<span>
									Hi Joshua, I’m designing a xxx product but there’s a x problem which is stopping the whole process. I really need help with more information about the process. Could you help me with
									it? I saw you have experience in this filed.
								</span>
								<div class="time">09:41</div>
							</div>
						</div>
						<div v-else class="f" style="justify-content: end">
							<div class="right f">
								<div class="count">
									<span>
										Hi Joshua, I’m designing a xxx product but there’s a x problem which is stopping the whole process. I really need help with more information about the process. Could you help me
										with it? I saw you have experience in this filed.
									</span>
									<div class="time">09:41</div>
								</div>
								<div class="lefImg"><img src="/src/assets/tou.png" alt="" /></div>
							</div>
						</div>
					</div>
				</div>
				<div class="inps">
					<div class="xian"></div>
					<div class="inpss f f-a-c f-j-b">
						<div v-if="baioShow" class="biaoqing">
							<Picker :data="emojiIndex" set="twitter" @select="showEmoji" />
						</div>
						<input type="textarea" @keydown="keydown" @focus="fouse" v-model="emojisOutput" class="botMessage" placeholder="Message.." name="" id="" />
						<div class="rigImg f f-a-c">
							<img src="/src/assets/user/6.png" alt="" />
							<img src="/src/assets/user/9.png" alt="" />
							<img @click.stop="Biaoqing" class="hand" src="/src/assets/user/10.png" alt="" />
						</div>
					</div>
				</div>
			</div>
			<!-- wadwefewfqwwq -->
			<div class="rigPorie f f-d-c f-a-c">
				<div class="topImg">
					<img src="/src/assets/tou.png" alt="" />
					<div class="dian"></div>
				</div>
				<div class="Joshu">Joshua Brown</div>
				<div class="tit">📍Seattle | 20:40</div>
				<div class="review">Rating: 4.7 / 5 (147 Reviews)</div>
				<div class="topcs f f-a-c f-w-w f-j-c">
					<div class="topics">Topics：</div>
					<div class="topItem">Managerial finance</div>
					<div class="topItem">VC</div>
				</div>
				<div class="review">Typically responds in 3h</div>
				<div class="btn hand">View Profile</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ChatToken } from "@/api/xpert.js";
	import data from "emoji-mart-vue-fast/data/all.json";
	import "emoji-mart-vue-fast/css/emoji-mart.css";
	import { Picker, EmojiIndex } from "emoji-mart-vue-fast/src";
	import { ref, onMounted, reactive } from "vue";
	import { Client } from "@twilio/conversations";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import { initInputToken } from "ant-design-vue/es/input/style";
	let token = ref("");
	let statusTab = ref(1);
	let USER_1_IDENTITY = "34_3";
	let conversation = "";
	const USER_1_PASSWORD = undefined;
	let inds = ref(1);
	let baioShow = ref(false);
	let search = ref("");
	// 111111111111111111111111111111111111111111111111111111111
	const emojiIndex = new EmojiIndex(data);
	// 输入框聊天内容
	const emojisOutput = ref("");
	// 点击弹出表情
	const Biaoqing = () => {
		baioShow.value = !baioShow.value;
	};
	// 当输入框聚焦时使表情框消失
	const fouse = () => {
		baioShow.value = false;
	};
	// 点击回车键执行的操作
	const keydown = async e => {
		if (e.keyCode != 13) return;
		// 发送消息
		await conversation.prepareMessage().setBody(emojisOutput.value).setAttributes({ foo: "bar" }).build().send();
		// 获取消息
		let paginator = await conversation.getMessages(30, 0, "backwards");
		const messagesSoFar = paginator.items;
		console.log(
			"Conversation has these messages",
			messagesSoFar,
			messagesSoFar.map(m => m.state.body)
		);
	};
	// 当选择表情包之后加到输入框内
	const showEmoji = emoji => {
		emojisOutput.value = emojisOutput.value + emoji.native;
	};

	const init = async () => {
		const client = new Client(token.value);
		console.log(client, "client");
		client.on("stateChanged", async state => {
			if (state === "failed") {
				// The client failed to initialize
				return;
			}
			if (state === "initialized") {
				console.log(state, `55555555555555555555`);
				client.on("initialized", () => {
					return demoConversationsSdk(client);
				});
			}
		});
		let conversationsPaginator = await client.getSubscribedConversations();
		// get conversations
		const conversations = conversationsPaginator.items;
		console.log(conversations, "11111111111111111111111");
	};
	const demoConversationsSdk = async client => {
		conversation = await client.createConversation({
			friendlyName: "Demo Conversation"
		});
		await conversation.join();
		console.log("已创建新对话:", conversation.sid);
		// await conversation.add("22_3");
		conversation.on("participantJoined", state => {
			// fired when a participant has joined the conversation
			console.log("触发与会者加入：", state.sid);
		});
		conversation.on("messageAdded", message => console.log("添加触发消息: ", message.state.body));
		// add chat participant to the conversation by its identity
		await conversation.add(USER_1_IDENTITY);

		// // 发送消息
		// await conversation.prepareMessage().setBody("Hello!").setAttributes({ foo: "bar" }).build().send();

		// // 获取消息
		// let paginator = await conversation.getMessages(30, 0, "backwards");
		// const messagesSoFar = paginator.items;
		// console.log(
		// 	"Conversation has these messages",
		// 	messagesSoFar.map(m => m.state.body)
		// );

		// process.exit(0);
	};
	onMounted(async () => {
		await initInputTokens();
		await init();
		window.addEventListener("scroll", handleScroll);
	});

	let list = [
		{
			img: "/src/assets/tou.png",
			count:
				"Hi Joshua, I’m designing a xxx product but  there’s a x problem which is stopping the whole process. I really need help with more information about the process. Could you help me with it? I saw you have experience in  this filed.",
			time: "07:32",
			pos: "left"
		},
		{
			img: "/src/assets/tou.png",
			count:
				"Hello! This is a great question, I actually just helped with someone in a similar situation last week! I can help you with it and let’s make a call for $90 /45min. Please let me know if you are interested.",
			time: "09:41",
			pos: "right"
		},
		{
			img: "/src/assets/tou.png",
			count:
				"Hi Joshua, I’m designing a xxx product but  there’s a x problem which is stopping the whole process. I really need help with more information about the process. Could you help me with it? I saw you have experience in  this filed.",
			time: "07:32",
			pos: "left"
		},
		{
			img: "/src/assets/tou.png",
			count:
				"Hello! This is a great question, I actually just helped with someone in a similar situation last week! I can help you with it and let’s make a call for $90 /45min. Please let me know if you are interested.",
			time: "09:41",
			pos: "right"
		},
		{
			img: "/src/assets/tou.png",
			count:
				"Hi Joshua, I’m designing a xxx product but  there’s a x problem which is stopping the whole process. I really need help with more information about the process. Could you help me with it? I saw you have experience in  this filed.",
			time: "07:32",
			pos: "left"
		},
		{
			img: "/src/assets/tou.png",
			count:
				"Hello! This is a great question, I actually just helped with someone in a similar situation last week! I can help you with it and let’s make a call for $90 /45min. Please let me know if you are interested.",
			time: "09:41",
			pos: "right"
		},
		{
			img: "/src/assets/tou.png",
			count:
				"Hi Joshua, I’m designing a xxx product but  there’s a x problem which is stopping the whole process. I really need help with more information about the process. Could you help me with it? I saw you have experience in  this filed.",
			time: "07:32",
			pos: "left"
		},
		{
			img: "/src/assets/tou.png",
			count:
				"Hello! This is a great question, I actually just helped with someone in a similar situation last week! I can help you with it and let’s make a call for $90 /45min. Please let me know if you are interested.",
			time: "09:41",
			pos: "right"
		},
		{
			img: "/src/assets/tou.png",
			count:
				"Hi Joshua, I’m designing a xxx product but  there’s a x problem which is stopping the whole process. I really need help with more information about the process. Could you help me with it? I saw you have experience in  this filed.",
			time: "07:32",
			pos: "left"
		},
		{
			img: "/src/assets/tou.png",
			count:
				"Hello! This is a great question, I actually just helped with someone in a similar situation last week! I can help you with it and let’s make a call for $90 /45min. Please let me know if you are interested.",
			time: "09:41",
			pos: "right"
		}
	];
	const qieList = (item, index) => {
		inds.value = index;
	};
	// 获取聊天token

	const initInputTokens = async () => {
		let n = await ChatToken();
		token.value = n.data;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 50) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
